<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列偏移</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <style>
		/*下面可以自己修改*/
    [class *= col-]{
      background-color: #eee;
      border: 1px solid #ccc;
    }
	</style>
</head>
<!--
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。
使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。在bootstrap.css中第1205行～1241行所示：

  .col-md-offset-12 {
   margin-left: 100%;
}
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
注意：

不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行

-->
<body>
<div class="container">
<h4>列向右移动四列的间距</h4>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-2</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4列 向右移动四列的间距</div>
  </div>
</div>
<br />
<h4>偏移及大小的总和超过12时候发生的行断裂</h4>
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-2</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
    <div class="col-md-4">col-md-4</div>
    
    <!--上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。-->
  </div>
</div>

<div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
    <div class="col-md-3 col-md-offset-1">.col-md-3列向右移动1列的间距</div>
</div>

</body>
</html>